$(function () {

    var statisticsVal,mirror_val;

    // 初始化日历反射域的值...
    $("#mirror_field").val(new Date().Format("yyyy-MM-dd"));
    $("#mirror_field_two").val(new Date().Format("yyyy-MM-dd"));
    $("#mirror_field_three").val(new Date().Format("yyyy-MM-dd"));


    // 设置日历显示的视图....显示日,月,年....
    function setCalendarView()
    {
        if( statisticsVal == 1 )
        {//按时统计...echarts显示0-24小时...日历显示0-30号...
            $('.tab_btn').show();
            $('.saveCalendar').show();
            $('.saveCalendar div.date').show().siblings('div').hide();

            $('.previous').html('上一天').siblings('p').html('下一天');

            // 获取日历上一个动作所设置的时间

        }
        else if( statisticsVal == 2 )
        {//按天统计...echarts显示0-30号...日历显示1-12个月...
            $('.tab_btn').show();
            $('.saveCalendar').show();
            $('.saveCalendar div.month').show().siblings('div').hide();
            $('.previous').html('上一月').siblings('p').html('下一月');
        }
        else if( statisticsVal == 3 )
        {//按月统计...echarts显示1-12月...日历显示2017年...
            $('.tab_btn').show();
            $('.saveCalendar').show();
            $('.saveCalendar div.year').show().siblings('div').hide();
            $('.previous').html('上一年').siblings('p').html('下一年');
        }
        else if( statisticsVal == 4 )
        {//按年统计...echarts显示2017年...日历隐藏...
            $('.tab_btn').hide();
            $('.saveCalendar').hide();

        };
    };

    // 封装一个函数....当日历的日期发生变化的时候...让echarts的内容发生变化...
    function getEchartsCont()
    {
        statisticsVal = $('.statisticsWay option:selected').val();

        if( $('.statistics_tab li.active').html() == '新增用户统计' )
        {
            myCharts.showLoading();
            if( statisticsVal == 1 )
            {//按时统计...echarts显示0-24小时...日历显示0-30号...
                getNewUserEcharts( $("#mirror_field").val() ,statisticsVal );
            }
            else if( statisticsVal == 2 )
            {//按天统计...echarts显示0-30号...日历显示1-12个月...
                getNewUserEcharts( $("#mirror_field_two").val(),statisticsVal );
            }
            else if( statisticsVal == 3 )
            {//按月统计...echarts显示1-12月...日历显示2017年...
                getNewUserEcharts( $("#mirror_field_three").val(),statisticsVal );
            }
            else if( statisticsVal == 4 )
            {//按年统计...echarts显示2017年...日历隐藏...
                getNewUserEcharts( $("#mirror_field_three").val(),statisticsVal );
            };

        }
        else if( $('.statistics_tab li.active').html() == '活跃用户统计' )
        {
            myCharts.showLoading();
            //获取..活跃用户...的echarts图表...默认显示当天按时统计...
            if( statisticsVal == 1 )
            {//按时统计...echarts显示0-24小时...日历显示0-30号...
                getActiveUserEcharts( $("#mirror_field").val(),statisticsVal );
            }
            else if( statisticsVal == 2 )
            {//按天统计...echarts显示0-30号...日历显示1-12个月...
                getActiveUserEcharts( $("#mirror_field_two").val(),statisticsVal );
            }
            else if( statisticsVal == 3 )
            {//按月统计...echarts显示1-12月...日历显示2017年...
                getActiveUserEcharts( $("#mirror_field_three").val(),statisticsVal );
            }
            else if( statisticsVal == 4 )
            {//按年统计...echarts显示2017年...日历隐藏...
                getActiveUserEcharts( $("#mirror_field_three").val(),statisticsVal );
            };
        };
    };

    // 用JS来获取放echarts的div的高度....
    // var gao = $(window).height() - $('.header').outerHeight(true) - $('.blue').outerHeight(true)- $('.user_count').outerHeight(true);
    var gao = $(window).height() - $('.header').outerHeight(true) - $('.blue').outerHeight(true)- 108;
    $('.echarts_div').height( gao );

    //eacharts初始化....
    var myCharts = echarts.init(document.getElementById('echarts_main'));
    var option = {
        title: {
            text: '新增用户统计',
            left:'center',
            bottom:'bottom'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['人数']
        },

        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: function (value, index) {
                    return value.toFixed(0);
                }
            },//设置y轴的刻度不要小数点.....
            axisLabel: {
                formatter: '{value}'
            },
        },
        series: [
            {
                name:'人数',
                type:'line',
                data:[3, 1, 15, 9, 12, 13, 10],
                markPoint: {//为折线图设置标注....
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                }
            }
        ]
    };
    myCharts.setOption(option);
    myCharts.showLoading();

    // 日历插件初始化...1...日期...
    $('#myDate').datetimepicker({
        startView:2,
        language: "cn",
        todayBtn:false,
        todayHighlight: true,
        minView:2,
        maxView:2,
        linkField:"mirror_field",//值反射域
        linkFormat: "yyyy-mm-dd",
        format:'yyyy-mm-dd'
    }).on('changeDate',function () {

        getEchartsCont();

    });
    // 日历插件初始化...2...月...
    $('#myDate_two').datetimepicker({
        startView:3,
        language: "cn",
        todayBtn:false,
        todayHighlight: true,
        minView:3,
        maxView:3,
        linkField:"mirror_field_two",//值反射域
        linkFormat: "yyyy-mm-dd",
        format:'yyyy-mm-dd'
    }).on('changeDate',function () {

        getEchartsCont();

    });
    // 日历插件初始化...3...年...
    $('#myDate_three').datetimepicker({
        startView:4,
        language: "cn",
        todayBtn:false,
        todayHighlight: true,
        minView:4,
        maxView:4,
        linkField:"mirror_field_three",//值反射域
        linkFormat: "yyyy-mm-dd",
        format:'yyyy-mm-dd'
    }).on('changeDate',function () {

        getEchartsCont();

    });

    // 页面初始化....获取新增用户的数量...
    getIncreaseUser();

    // 页面初始化...eacharts默认显示新增用户按时统计....默认显示当天的数据....
    getNewUserEcharts(new Date().Format("yyyy-MM-dd"),1);

    // 新增用户数量....顶部的li设置切换事件....这个地方获取到的数据有问题....
    $('.statistics_tab').delegate('li','click',function () {

        var target=$(event.target);
        target.addClass('active').siblings('li').removeClass('active');
        statisticsVal = $('.statisticsWay option:selected').val();
        var newAddDate,activeDate;
        var len = 3;

        if( target.html() == '新增用户统计' )
        {
            // 获取新增用户数量
            getIncreaseUser();

            myCharts.showLoading();

            // 获取显示日历上一个动作所对应的时间
            for( var  i=0;i<len;i++ ){
                if( $('.saveCalendar div.mydate').eq(i).css('display') == 'block' ){
                    if(i == 0){

                        newAddDate = $('#mirror_field').val();

                    }else if(i == 1){

                        newAddDate = $('#mirror_field_two').val();

                    }else if(i == 2){

                        newAddDate = $('#mirror_field_three').val();

                    };
                    // console.log(newAddDate)
                };
            };

            //获取...新增用户...的echarts图表...默认显示当天按时统计...日期应该是显示出来的日历所对应的日期...
            getNewUserEcharts(newAddDate,statisticsVal);

        }
        else if( target.html() == '活跃用户统计' )
        {
            // 获取活跃用户数量
            getActiveUser();

            myCharts.showLoading();

            // 获取显示日历上一个动作所对应的时间
            for( var  i=0;i<len;i++ ){
                if( $('.saveCalendar div.mydate').eq(i).css('display') == 'block' ){
                    if(i == 0){

                        activeDate = $('#mirror_field').val();

                    }else if(i == 1){

                        activeDate = $('#mirror_field_two').val();

                    }else if(i == 2){

                        activeDate = $('#mirror_field_three').val();

                    };
                    console.log(activeDate)
                };
            };

            // 获取统计方式所对应的图表
            getActiveUserEcharts(activeDate,statisticsVal);
        };


    });

    // 获取新增用户的数量...封装一个方法...
    function getIncreaseUser()
    {
        $.ajax({
            type:'post',
            headers: {"Accept-CMS-Token":token},
            url:addusercount,
            data:{},
            dataType:'json',
            success:function (result){
                if( result.resultCode == 200 )
                {
                    var value = result.value;
                    $('.oneday').html('<span class="small">今日新增</span><br><span class="count ">'+value[0].number+'</span>');
                    $('.yesterday').html('<span class="small">昨日新增</span><br><span class="count ">'+value[1].number+'</span>');
                    $('.sevenday').html('<span class="small">本周新增</span><br><span class="count ">'+value[2].number+'</span>');
                    $('.onemonth').html('<span class="small">本月新增</span><br><span class="count ">'+value[3].number+'</span>');
                    $('.allday').html('<span class="small">总用户</span><br><span class="count ">'+value[4].number+'</span>');
                }
                else if(result.resultCode == 515)
                {
                    localStorage.clear();
                    reLogin();
                };
                console.log('新增用户数量接口请求成功!!!!')
            },
            error:function(){
                console.log('新增用户数量接口请求失败')
            },

        });
    };

    // 获取活跃用户的数量...封装的一个方法...
    function getActiveUser()
    {
        $.ajax({
            type:'post',
            headers: {"Accept-CMS-Token":token},
            url:activeusercount,
            data:{},
            dataType:'json',
            success:function (result){
                if( result.resultCode == 200 )
                {
                    var value = result.value;
                    $('.oneday').html('<span class="small">今日用户</span><br><span class="count ">'+value[0].number+'</span>');
                    $('.yesterday').html('<span class="small">昨日用户</span><br><span class="count ">'+value[1].number+'</span>');
                    $('.sevenday').html('<span class="small">本周用户</span><br><span class="count ">'+value[2].number+'</span>');
                    $('.onemonth').html('<span class="small">本月用户</span><br><span class="count ">'+value[3].number+'</span>');
                    $('.allday').html('<span class="small">总用户</span><br><span class="count ">'+value[4].number+'</span>');
                }
                else if(result.resultCode == 515)
                {
                    localStorage.clear();
                    reLogin();
                };
                console.log('活跃用户接口请求成功!!!!')
            },
            error:function(){
                console.log('活跃用户接口请求失败')
            },

        });
    };

    // 获取新增用户所统计的图表...默认显示按时统计...
    function getNewUserEcharts(data,type)
    {
        // 每次加载新数据的时候...都要把之前的数据清理干净...
        clearEcharts();

        $.ajax({
            type:'post',
            headers: {"Accept-CMS-Token":token},
            url:addusercountmap,
            data:{
                data:data,
                type:type
            },
            dataType:'json',
            success:function (result){
                if( result.resultCode == 200 )
                {
                    var value = result.value;
                    var len = value.number;
                    // 将从后台获取到的数据放到echarts中...
                    myCharts.setOption({
                        title: {
                            text: '新增用户统计',
                        },
                        xAxis:  {
                            type: 'category',
                            boundaryGap: false,
                            data: value.title//注意这个地方...x轴的数据...
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}人'
                            }
                        },
                        series: [
                            {
                                name:'人数',
                                type:'line',
                                data: value.number,//注意这个地方...y轴的数据...
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值', xAxis: 1, yAxis: -1.5},
                                        {type: 'min', name: '最小值', xAxis: 1, yAxis: -1.5}
                                    ]
                                }
                            }
                        ]

                    });

                    myCharts.hideLoading();

                }
                else if(result.resultCode == 500)
                {
                    alert('亲,没有数据...');
                    if( statisticsVal == undefined )
                    {//按时统计...0-23
                        setZeroEcharts( [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23] , [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] )
                    }
                    else if(statisticsVal == 1)
                    {//按时统计...0-23
                        setZeroEcharts([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23] , [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0])
                    }
                    else if(statisticsVal == 2)
                    {//按天统计,显示相应月份所对应的总日期天数...要根据年份来获取...
                        // getDaysInOneMonth(year, month)利用这个函数封装好了以后,获取年份总天数....
                        //要先获取到日历的月份...然后选择日历对应的天数...
                        var calendarMonth = new Date($("#mirror_field_two").val());

                        var total = getDaysInOneMonth( calendarMonth.getFullYear() , calendarMonth.getMonth()+1 );//得到了当月的总天数
                        console.log(calendarMonth.getMonth()+',,,'+calendarMonth.getFullYear())
                        var allDays = [];
                        var yData = [];
                        for( var i=0;i<total;i++)
                        {
                            allDays.push(i+1);
                            yData.push(0);
                        };

                        setZeroEcharts(allDays,yData);

                    }
                    else if(statisticsVal == 3)
                    {//显示1-12个月
                        setZeroEcharts([1,2,3,4,5,6,7,8,9,10,11,12] , [0,0,0,0,0,0,0,0,0,0,0,0])
                    }
                    else if(statisticsVal == 4)
                    {//显示2017年
                        var calendarYear = new Date($("#mirror_field_two").val());
                        setZeroEcharts( [calendarYear.getFullYear()] ,[0] );
                    };

                    myCharts.hideLoading();

                }
                else if(result.resultCode == 515)
                {
                    localStorage.clear();
                    reLogin();
                };
                console.log('新增用户图表接口请求成功!!!!')
            },
            error:function(){
                console.log('新增用户图表接口请求失败...')
            },

        });

    };

    // 获取活跃用户所统计的图表...
    function getActiveUserEcharts(data,type)
    {
        // 每次加载新数据的时候...都要把之前的数据清理干净...
        clearEcharts();

        $.ajax({
            type:'post',
            headers: {"Accept-CMS-Token":token},
            url:activeusercountmap,
            data:{
                data:data,
                type:type
            },
            dataType:'json',
            success:function (result){
                var value = result.value;
                if( result.resultCode == 200 )
                {
                    // 将从后台获取到的数据放到echarts中...
                    myCharts.setOption({
                        title: {
                            text: '活跃用户统计',
                        },
                        xAxis:  {
                            type: 'category',
                            boundaryGap: false,
                            data: value.title//注意这个地方...x轴的数据...
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}人'
                            }
                        },
                        series: [
                            {
                                name:'人数',
                                type:'line',
                                data: value.number,//注意这个地方...y轴的数据...
                            }
                        ]

                    });

                    myCharts.hideLoading();

                }
                else if(result.resultCode == 500)
                {
                    alert('亲,没有数据...');
                    // console.log(statisticsVal);
                    if( statisticsVal == undefined )
                    {
                        setZeroEcharts( [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23] , [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] )
                    }
                    else if(statisticsVal == 1)
                    {
                        setZeroEcharts( [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23] , [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] )
                    }
                    else if(statisticsVal == 2)
                    {
                        var calendarMonth = new Date($("#mirror_field_two").val());

                        var total = getDaysInOneMonth( calendarMonth.getFullYear() , calendarMonth.getMonth() + 1 );//得到了当月的总天数
                        var allDays = [];
                        var yData = [];
                        for( var i=0;i<total;i++)
                        {
                            allDays.push(i+1);
                            yData.push(0)
                        };

                        setZeroEcharts(allDays,yData);
                    }
                    else if(statisticsVal == 3)
                    {
                        setZeroEcharts([1,2,3,4,5,6,7,8,9,10,11,12] , [0,0,0,0,0,0,0,0,0,0,0,0])
                    }
                    else if(statisticsVal == 4)
                    {
                        var calendarYear = new Date($("#mirror_field_two").val());
                        setZeroEcharts( [calendarYear.getFullYear()] ,[0] );
                    };
                    myCharts.hideLoading();
                }
                else if(result.resultCode == 515)
                {
                    localStorage.clear();
                    reLogin();
                };
                console.log('新增用户图表接口请求成功!!!!')
            },
            error:function(){
                console.log('新增用户图表接口请求失败...')
            },

        });

    };

    // 改变下拉菜单....echarts图表从后台获取内容...要获取上一次所选择的日期....日期获取的不正确....
    $('.statisticsWay').change(function () {

        statisticsVal = $('.statisticsWay option:selected').val();

        var wordStr = $('.statistics_tab li[class = active]').html();
        var len = $('.saveCalendar div.mydate').length;
        var newAddDate,activeDate;
        // console.log(len)

        // 通过状态码...让日历选择器切换到对应的显示...
        $('.saveCalendar').show();

        // 设置日历显示的视图...
        setCalendarView();

        if( wordStr == '新增用户统计' )
        {
            myCharts.showLoading();

            // 获取显示日历上一个动作所对应的时间
            for( var  i=0;i<len;i++ ){
                if( $('.saveCalendar div.mydate').eq(i).css('display') == 'block' ){
                    if(i == 0){

                        newAddDate = $('#mirror_field').val();

                    }else if(i == 1){

                        newAddDate = $('#mirror_field_two').val();

                    }else if(i == 2){

                        newAddDate = $('#mirror_field_three').val();

                    };
                    // console.log(newAddDate)
                };
            };

            // 获取统计方式所对应的图表
            getNewUserEcharts( newAddDate,statisticsVal);
        }
        else if( wordStr == '活跃用户统计' )
        {
            myCharts.showLoading();

            // 获取显示日历上一个动作所对应的时间
            for( var  i=0;i<len;i++ ){
                if( $('.saveCalendar div.mydate').eq(i).css('display') == 'block' ){
                    if(i == 0){

                        activeDate = $('#mirror_field').val();

                    }else if(i == 1){

                        activeDate = $('#mirror_field_two').val();

                    }else if(i == 2){

                        activeDate = $('#mirror_field_three').val();

                    };
                    console.log(activeDate)
                };
            };

            // 获取统计方式所对应的图表
            getActiveUserEcharts(activeDate,statisticsVal);
        };



    });

    // 让上一个按钮和日历...相互关联...点击上一天....
    $('.previous').click(function () {

        if( $(this).html() == '上一天' )
        {
            mirror_val = $("#mirror_field").val();

            var day = addYourDate( mirror_val,0,0,-1);
            // 更新日历中的时间
            $('#myDate').datetimepicker('update',day);
            // 更新echarts图表内容
            getEchartsCont();
        }
        else if( $(this).html() == '上一月' )
        {
            mirror_val = $("#mirror_field_two").val();

            var month = addYourDate( mirror_val,0,-1,0);

            // 更新日历中的时间
            $('#myDate_two').datetimepicker('update',month);
            // 更新echarts图表内容
            getEchartsCont();
        }
        else if( $(this).html() == '上一年' )
        {
            mirror_val = $("#mirror_field_three").val();

            var year = addYourDate( mirror_val,-1,0,0);

            // 更新日历中的时间
            $('#myDate_three').datetimepicker('update',year);

            // 更新echarts图表内容
            getEchartsCont();
        };
    });

    // 让上一个按钮和日历...相互关联...点击下一天....
    $('.next').click(function () {

        if( $(this).html() == '下一天' )
        {
            mirror_val =  $("#mirror_field").val();

            var day = addYourDate( mirror_val,0,0,1);
            // 更新日历中的时间
            $('#myDate').datetimepicker('update',day);
            // 更新echarts图表内容
            getEchartsCont();
        }
        else if( $(this).html() == '下一月' )
        {
            mirror_val = $("#mirror_field_two").val();

            var month = addYourDate( mirror_val,0,1,0);

            // 更新日历中的时间
            $('#myDate_two').datetimepicker('update',month);
            // 更新echarts图表内容
            getEchartsCont();
        }
        else if( $(this).html() == '下一年' )
        {
            mirror_val = $("#mirror_field_three").val();

            var year = addYourDate( mirror_val,1,0,0);

            // 更新日历中的时间
            $('#myDate_three').datetimepicker('update',year);
            // 更新echarts图表内容
            getEchartsCont();
        };


    });

    // 当点击按钮的时候,去设置日期,将这个设置好的日期作为返回值,日期的增减
    function addYourDate(myDate,year,month,day)
    {
        var date = new Date( myDate.replace(/-/g,  ",") );
        date.setFullYear( date.getFullYear() + year );
        date.setMonth( date.getMonth() + month );
        date.setDate( date.getDate() + day );

        return date.getFullYear() + '-' + (date.getMonth() + 1 ) + '-' + date.getDate();

    };


    // 清空echarts当中的数据...
    function clearEcharts()
    {
        myCharts.setOption({
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: [1,2,3,4,5,6,7,8,9]
            },
            yAxis: {
                type: 'value',
                // 'max':10,
                'splitNumber':1 ,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [
                {
                    name:'人数',
                    type:'line',
                    data:[0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        });
    }

    // 设置ztree的数据为0....
    function setZeroEcharts(data,yData)
    {
        myCharts.setOption({
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: data//注意这个地方...x轴的数据...
            },
            yAxis: {
                type: 'value',
                // 'max':10,
                'splitNumber':1 ,
                axisLabel: {
                    formatter: function (value, index) {
                        return value.toFixed(0);
                    }
                },//设置y轴的刻度不要小数点.....
                splitLine: {
                    show: true
                },
            },
            series: [
                {
                    data:yData,//注意这个地方...y轴的数据...
                }
            ]

        });
    };

    //为侧边栏的标签增加active
    function setSideActive()
    {
        for(var m=0;m<$('.sub_list').length;m++)
        {
            for(var n=0;n<$('.sub_list').eq(m).children('li').length;n++)
            {
                if( $('.sub_list').eq(m).children('li').eq(n).children('a').attr('href') .indexOf('user_statistics.html') >= 0 )
                {
                    $('.sub_list').eq(m).children('li').eq(n).addClass('active');
                    $('.sub_list').eq(m).children('li').eq(n).parent('ul').prev('h3').css({ 'color':'#fff' })
                    $('#accordion h3').eq(m).attr('onOff',0)
                };

            };

        };
    };
    setSideActive();

    //页面初始化时 为侧边栏一级菜单设置展开和折叠....
    function setFirstUnfold()
    {
        for( var i=0;i<$('.sub_list').length;i++ )
        {
            if($('#accordion h3').eq(i).attr('onOff') == 1)
            {
                $('.sub_list').eq(i).hide();
            }
            else
            {
                $('.sub_list').eq(i).show();
            };
        };
    };
    setFirstUnfold();

    // 当后台状态码是515时,让客户重新登录
    function reLogin()
    {
        alert('登录超时,请重新登录!');
        localStorage.clear();
        window.location.href = login_jump;
    }

    // 封装一个函数,用来获取某月的总天数...
    function getDaysInOneMonth(year, month)
    {
        month = parseInt(month, 10);
        var d= new Date(year, month, 0);
        return d.getDate();
    };





})
